<template>
	<ul>
		<li>
			<div>
				<input type="checkbox" v-model="isAllChecked"/>
				<span>{{ isAllChecked ? '反选' : '全选' }}</span>
			</div>
		</li>
		<!-- 数据行 -->
		<li v-for="(item, index) in dataList" :key="index">
			<!-- 勾选了选框，v-model会将当前选框的value值加到数组中 -->
			<input type="checkbox" v-model="checkList" :value="item"/>
			<img :src="item.img"/>
			<div>
				<p v-text="item.title"></p>
				<p>单价：{{ item.price }}</p>
			</div>
			<div>
				<!-- button默认是启用的 -->
				<!-- :disabled="true"会设置按钮为禁用 -->
				<button @click="item.number --" 
					:disabled="item.number <= 1">-</button>
				{{ item.number }}
				<button @click="item.number ++" 
					:disabled="item.number >= item.maxNumber">+</button>
			</div>
			<button @click="handleDel(index, item.id)">删除</button>
		</li>
		<li v-if="dataList.length < 1">
			购物车中还没有商品~
		</li>
		<li>
			总金额：{{ sum }}
		</li>
	</ul>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
const dataList = reactive([
    {
        id: 1,
        title: '商品1',
        price: 10,
        number: 1,
        img: 'https://img.alicdn.com/imgextra/i1/2214139834336/O1CN01YARYay1htwDZFHmWO_!!2214139834336-0-alimamacc.jpg_580x580q90.jpg_.webp',
        maxNumber: 5
    },
    {
        id: 2,
        title: '商品2',
        price: 20,
        number: 1,
        img: 'https://img.alicdn.com/imgextra/i2/3292659455/O1CN01We5hHQ2JiRjkEwrpv_!!0-saturn_solar.jpg_580x580q90.jpg_.webp',
        maxNumber: 5
    },
    {
        id: 3,
        title: '商品3',
        price: 10,
        number: 1,
        img: 'https://img.alicdn.com/imgextra/i4/96565893/O1CN01wFsazE1tP2qwzYlPM_!!0-saturn_solar.jpg_580x580q90.jpg_.webp',
        maxNumber: 5
    }
])

// 存放已经勾选了的商品对象
// 提供给每一条商品的复选框使用
const checkList = ref([])
// 根据checkList中的商品数据计算总金额
const sum = computed(() => {
	// let total = 0
	// checkList.value.forEach(item => total += (item.price * item.number))
	// return total
	// 定义临时变量total，初始化为0
	return checkList.value
			.reduce((total, item) => total += (item.price * item.number), 0)
})

// 删除商品数据，同时还要在已勾选的数组中删除
const handleDel = (index, id) => {
	// 从dataList中删除
	dataList.splice(index, 1)
	// 从checkList中删除，不能通过索引删
	// checkList中的元素数量和顺序可能和dataList不一致
	// checkList.value.splice(index, 1)
	// 根据商品的id来删除，使用过滤
	checkList.value = checkList.value.filter(item => item.id !== id)
}

// 根据dataList和checkList计算全选框的状态
const isAllChecked = computed({
	get() {
		// 如果checkList长度和dataList长度一致，就证明全选了
		// 排除空数据的情况
		return dataList.length !== 0 
			&& checkList.value.length === dataList.length
	},
	set(value) {
		// value是预修改的值
		// 如果value是true，证明用户在勾选，把所有商品都勾选住（通过代码添加数组）
		if(value) {
			// 全选
			checkList.value = dataList
		} else {
			// 反选
			checkList.value = []
		}
	}
})
</script>

<!-- scoped会对组件形成样式保护，当前的CSS样式只对当前vue组件生效 -->
<style scoped>
/* 不能对body标签生效 */	
* {
	margin: 0;
	padding: 0;
}
li {
	border: 1px solid #ccc;
	padding: 10px;
	/* 内部子元素实现弹性布局 */
	display: flex;
	/* 主轴方向（水平）的对齐方式 */
	justify-content: space-between;
	/* 交叉轴方向（垂直）的对齐方式 */
	align-items: center;
}
li img {
	width: 80px;
}
</style>